<script lang="ts" setup>
import { useLocale } from '~/modules/locale';

const { localeOption } = useLocale();
</script>

<template>
  <div v-if="envs.isTg" class="h-full w-full bg-[rgba(0,0,0,0.9)]">
    <div v-if="envs.isIos" class="content">
      <div class="border-line flex-col">
        {{ $t('6mhXkzg3SUiPdIHr3lL') }}<br>
        <I18nT keypath="0bvqm4t26w7R88ee3uD0X" tag="div">
          <template #name>
            <span class="text-red-500">{{ $t('r7uIFq0OTr8Qd_6o30T') }}</span>
          </template>
        </I18nT>
      </div>
      <div class="icon-box">
        <img src="../pic/browser.svg" class="m-[0_auto] block">
      </div>
      <img src="../pic/line.png" class="absolute bottom-7.5 right-8 w-20">
    </div>

    <div v-if="envs.isAndroid" class="content">
      <I18nT keypath="pWmmJy3eF02Frq3oZh6q" tag="div" class="border-line">
        <template #name>
          <span class="text-red-500">{{ $t('wyOIbdkxEwBls8XEb2Ort') }}</span>
        </template>
      </I18nT>
      <div class="icon-box">
        <i class="icon i-local:install--m-1 m-[0_auto] block" />
      </div>

      <I18nT keypath="t5Fs3jAcD8F1I06Cakkwa" tag="div" class="border-line">
        <template #name>
          <span class="text-red-500">{{ $t('pgmG4gkfCq67Feup4YbLg') }}</span>
        </template>
      </I18nT>

      <div class="w-55">
        <img v-if="localeOption?.value === 'zh-CN'" src="../pic/zh-tips.png" class="w-full">
        <img v-else src="../pic/en-tips.png" class="w-full">
      </div>
      <img src="../pic/line.png" class="absolute right-8 top-3 w-20 rotate-x-180">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  --uno: 'gap-7.5 flex flex-col justify-center fixed items-center  top-0 left-0 w-full h-full text-white  text-4.5';
}
.border-line {
  --uno: 'border-2 border-[#848A9D] rounded-10 border-dashed  py-4  leading-normal w-65 text-center px-2';
}
.icon-box {
  --uno: 'w-26.5 rounded-3xl bg-sys-layer-e py-2.5';
}
</style>
